<script setup>
import LeaveForm from '@/components/leave/LeaveForm.vue'
import FloatingBackButton from '@/components/common/FloatingBackButton.vue'
</script>

<template>
  <div class="page">
    <div class="container">
      <div class="header">
        <h2>新建请假</h2>
      </div>
      <div class="card elevated">
        <LeaveForm />
      </div>
    </div>
    <FloatingBackButton />
  </div>
</template>

<style scoped>
.page {
  position: fixed;
  inset: 0;
  padding: 32px 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 105, 0, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255, 105, 0, 0.04) 0%, transparent 40%);
}
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 16px;
}
.elevated {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.header h2 {
  font-size: 22px;
  color: #1d1d1f;
}
</style>
